<!--
 * @Desc: 首页
 * @version: v1.00
 * @Author: harry
 * @Date: 2023-8-10 21:45:31
 * @LastEditors: harry
 * @LastEditTime: 2024-04-07 20:57:16
-->
<template>
<div class="homePage">
  <div id="home">
    <a-carousel autoplay>
      <div>
        <img :src="rec.imgs[0]" alt="">
      </div>
      <div>
        <img :src="rec.imgs[1]" alt="">
      </div>
    </a-carousel>
  </div>
  <div class="homePage-service" id="service">
    <div class="homePage-service-title">  
      <h3>软件服务-核心理念</h3>
      <p>以客户为中心的数字化服务理念，结合各类型案例打造快捷、好用、高效的数字化服务平台，以降本增效为首要目标为客户节约成本</p>
    </div>
    <div class="homePage-service-step">
      <div class="homePage-service-step-item">
        <div><img src="@/assets/img/step1.png" alt=""></div>
        <div class="line"></div>
        <div class="desc">
          通过挖掘项目中蕴含的共性需求和痛点问题，提供专业化服务、呈现具备市场竞争力的产品，以多年的行业经验与丰富的技术积累，围绕项目不断的创新与优化，把沉淀的经验转化为更多商业价值，推动企业持续发展和增长，助力客户解决业务难题，提升竞争力
        </div>
      </div>
      <div class="homePage-service-step-item">
        <div><img src="@/assets/img/step2.png" alt=""></div>
        <div class="line"></div>
        <div class="desc">
          通过深入了解客户业务流程、痛点和目标，依托需求进行相关案例的展示，达到客户满意、用户放心，并提供量身定制的服务，包括功能扩展、界面优化、性能提升等，以满足客户的独特需求。更加具备降低客户成本的特点，推动客户信息化建设的成功
        </div>
      </div>
      <div class="homePage-service-step-item">
        <div><img src="@/assets/img/step3.png" alt=""></div>
        <div class="line"></div>
        <div class="desc">
          专业的软件运维服务能够快速响应客户的需求和问题，全面的运维支撑帮助用户更好地使用产品，提高工作效率和满意度，我们更希望通过持续优化产品和服务来为更多的企业提供更加专业、更加完美的信息化建设，推动客户长期发展与成功
        </div>
      </div>
    </div>
    <div class="homePage-service-count">
      <div>
        <p>
          <span>10</span>
          +年
        </p>
        <p>行业经验</p>
      </div>
      <div>
        <p>
          <span>200</span>
          +
        </p>
        <p>项目研发</p>
      </div>
      <div>
        <p>
          <span>20</span>
          +
        </p>
        <p>技术大佬</p>
      </div>
    </div>
    <div class="homePage-service-title">  
      <h3>软件服务-开发服务</h3>
      <p>整合多端开发技术，提供高质量高效率的软件服务</p>
    </div>
    <div class="homePage-service-tro">
      <div class="box1">
        <div>
          <img src="@/assets/img/a5.png" alt="">
          <div>
            <p>Android APP开发</p>
            <p>采用H5技术开发高性能APP，具有敏捷、快速、多终端兼容特点</p>
          </div>
        </div>
        <div>
          <img src="@/assets/img/a7.png" alt="">
          <div>
            <p>IOS APP开发</p>
            <p>采用H5技术开发高性能APP，具有敏捷、快速、多终端兼容特点</p>
          </div>
        </div>
      </div>
      <div class="box2">
        <p>小程序开发</p>
        <p>多端一套技术研发兼容各平台的小程序，微信、抖音、支付宝、快手等平台都可以兼容</p>
      </div>
      <div class="box3">
        <div>
          <img src="@/assets/img/a6.png" alt="">
          <div>
            <p>微信公众号开发</p>
            <p>打造亿级用户平台，灵活的开发方式，完美的兼容</p>
          </div>
        </div>
        <div>
          <img src="@/assets/img/a8.png" alt="">
          <div>
            <p>WEB H5开发</p>
            <p>多端多平台最新前沿技术开发web应用</p>
          </div>
        </div>
      </div>
    </div>
    <div class="homePage-service-pro">
      <div class="content">
        <div class="homePage-service-title">
          <h3>软件服务-项目承接</h3>
          <p>依托客户项目需求进行项目工时评估，给出计划交付日期，实时与客户保持项目进展沟通</p>
        </div>
        <div class="content-o">
          <div>
            <img src="@/assets/img/manage.png" alt="">
            <p>CRM/WMS/ERP等企业内部信息化管理系统</p>
          </div>
          <div>
            <img src="@/assets/img/ebuy.png" alt="">
            <p>聚集商户、平台，多端一体线上商城</p>
          </div>
          <div>
            <img src="@/assets/img/exam.png" alt="">
            <p>在线考试系统，PC、小程序、APP多端一体</p>
          </div>
          <div>
            <img src="@/assets/img/edu.png" alt="">
            <p>幼儿教育+普通教育各场景应用，学校、老师、家长多维度共同搭建学生教育生态</p>
          </div>
        </div>
        <div class="content-t">
          <div>
            <img src="@/assets/img/website.png" alt="">
            <p>企业、政府等门户网站搭建，助力数字化转型</p>
          </div>
          <div>
            <img src="@/assets/img/kind.png" alt="">
            <p>多样化、多端、跨平台各类型系统的定制化服务</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="homePage-service" id="program">
    <div class="homePage-service-title">  
      <h3>项目案例</h3>
      <p>卓越开发，筑造经典</p>
    </div>
    <div class="homePage-service-process">
      <div class="item">
        <div>
          <img src="@/assets/img/p1.jpg" alt="">
        </div>
        <div class="item-name">
          电商平台
        </div>
      </div>

      <div class="item">
        <div>
          <img src="@/assets/img/404.png" alt="">
        </div>
        <div class="item-name">
          皇家一号系统平台
        </div>
      </div>

      <div class="item">
        <div>
          <img src="@/assets/img/404.png" alt="">
        </div>
        <div class="item-name">
          皇家一号系统平台
        </div>
      </div>

      <div class="item">
        <div>
          <img src="@/assets/img/404.png" alt="">
        </div>
        <div class="item-name">
          皇家一号系统平台
        </div>
      </div>

      <div class="item">
        <div>
          <img src="@/assets/img/404.png" alt="">
        </div>
        <div class="item-name">
          皇家一号系统平台
        </div>
      </div>

      <div class="item">
        <div>
          <img src="@/assets/img/404.png" alt="">
        </div>
        <div class="item-name">
          皇家一号系统平台
        </div>
      </div>
    </div>
  </div> -->
  <div class="homePage-service" id="about">
    <div class="homePage-service-title">  
      <h3>关于我们</h3>
      <p>知行致远，诚言行正</p>
    </div>
    <div class="homePage-service-aboutUs">
      <div class="desc">
        <img src="@/assets/img/about.jpg" alt="">
        <div>
          <h2>知行 致远 诚言 守正</h2>
          我们始终坚信帮助客户减少成本，更好地提供售后运维服务，实实在在为客户解决问题。远晨坚持以客户为中心，为客户提供卓越技术服务，为客户降本增效。我们致力于成为移动互联网时代优质的技术服务商，助力企业互联网+转型升级。我们秉承以用户价值为依归的经营理念，认真务实、精益求精，用匠心精神，勉力为用户打造的具有竞争力的产品！
        </div>
      </div>
    </div>
  </div>
  <div class="fixedStyle">
    <a-tooltip placement="left">
      <template #title>
        <img src="@/assets/img/wx.png" alt="" style="width:200px;height:200px;">
      </template>
      <div>
        <img src="@/assets/img/chat.png" alt="">
      </div>
    </a-tooltip>
    <a-tooltip placement="left">
      <template #title>
        <span style="font-size: 20px;">15692888525</span>
      </template>
      <div>
        <img src="@/assets/img/tel.png" alt="">
      </div>
    </a-tooltip>
    <a-tooltip placement="left">
      <template #title>
        <span>回到顶部</span>
      </template>
      <div @click="scrollToTop">
        <img src="@/assets/img/toTop.png" alt="">
      </div>
    </a-tooltip>
    <!-- <div></div> -->
  </div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";

const rec = reactive({
  imgs: [require('@/assets/img/b1.png'), require('@/assets/img/b2.jpg')]
})
const scrollToTop = () => {
  document.getElementById(`subLayout`)?.scrollIntoView({ behavior: "auto" })
};
</script>
<style scoped lang="less">
.homePage {
  .fixedStyle{
    position: fixed;
    right: 0;
    bottom: 30%;
    div {
      width: 60px;
      height: 65px;
      position: relative;
      font-size: 16px;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      text-align: center;
      line-height: 65px;
      cursor: pointer;
      overflow: hidden;
      background: rgba(53,63,88,0.66);
      &:hover {
        background: #529797;
      }
      img {
        width: 30px;
      }
    }
  }
  #home {
    img {
      width: 100%;
    }
  }
  &-service {
    margin-top: 60px;
    &-title {
      display: flex;
      align-items: center;
      flex-direction: column;
      h3 {
        font-size: 30px;
        margin-bottom: 20px;
      }
      p {
        font-size: 16px;
        color: #666666;
      }
    }
    &-tro {
      display: flex;
      justify-content: center;
      margin-top: 60px;
      .box1, .box2, .box3 {
        display: flex;
        flex-direction: column;
        height: 330px;
        // border: 1px solid #f0f0f0;
        margin: 0 60px;
        margin-bottom: 20px;
        background: #fff;
        > div {
          display: flex;
          padding: 30px 30px;
          align-items: center;
          > div {
            display: flex;
            align-items: left;
            flex-direction: column;
            justify-content: center;
            width: 200px;
            padding-left: 20px;
            p {
              margin-bottom: 0;
            }
            > p:nth-child(1) {
              font-size: 20px;
              color: #000;
              margin-bottom: 16px;
            }
            > p:nth-child(2) {
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
      .box2 {
        background: url('../../assets/img/a9.png') no-repeat;
        width: 300px;
        height: 360px;
        padding: 15px 0;
        padding-top: 100px;
        > p:nth-child(1) {
          font-size: 20px;
          color: #000;
          margin-bottom: 16px;
          text-align: center;
        }
        > p:nth-child(2) {
          font-size: 14px;
          color: #666;
        }
      }
    }
    &-pro {
      background: url('../../assets/img/ipone.jpg') no-repeat;
      background-size: 100% 100%;
      margin-top: 100px;
      margin-bottom: 80px;
      .content {
        background-color: #578383;
        opacity: 0.9;
        display: flex;
        flex-direction: column;
        align-items: center;
        // height: 600px;
        padding: 60px 0;
        .homePage-service-title {
          h3, p {
            color: white;
          }
        }
        &-o, &-t {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          width: 1280px;
          > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 50px;
            margin-right: 13px;
            background: #5e878d;
            img {
              width: 90px;
            }
            p {
              width: 200px;
              font-size: 15px;
              color: white;
              text-align: center;
              white-space: 2px;
              margin-top: 8px;
            }
          }
        }
        &-t{
          >div {
            flex: 1;
          }
        }
      }
    }
    &-step {
      width: 1310px;
      display: flex;
      // justify-content: center;
      margin: 0 auto;
      justify-content: center;
      &-item {
        background: url('../../assets/img/arrow.png') no-repeat !important;
        background-color: #fff !important;
        background-position: bottom right;
        background-size: cover;
        padding: 100px 80px 100px 60px;
        flex: 1;
        text-align: center;
        .line {
          border-bottom: 1px solid #d5d5d5;
          margin: 40px 0;
        }
        .desc {
          text-align: left;
        }
      }
      &-item:first-child {
        background-image: none !important;
      }
    }
    &-count {
      display: flex;
      width: 1310px;
      margin: 0 auto;
      justify-content: space-around;
      background: #fff;
      margin-bottom: 80px;
      padding: 30px 0;
      >div {
        >p:first-child {
          font-size: 18px;
          color: #ff8400;
          span {
            font-size: 30px;
          }
        }
        >p:nth-child(2) {
          font-size: 18px;
        }
      }
    }
    &-aboutUs {
      width: 1310px;
      margin: 60px auto;
      background: #fff;
      .desc {
        display: flex;
        div {
          font-size: 16px;
          padding: 20px 60px;
        }
      }
    }
    &-process {
      width: 1310px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      // background: #fff;
      .item {
        margin-bottom: 20px;
        margin-right: 10px;
        margin-left: 10px;
        display: inline-block;
        cursor: pointer;
        text-align: center;
        &:hover .item-name{
          background: rgb(84, 84, 252);
          color: #fff;
        }
        img {
          width: 307px;
          // height: 400px;
        }
        &-name {
          font-size: 16px;
          background: #d5d5d5;
          padding: 15px 25px;
        }
      }
    }
  }
}

</style>
